import {Component, Input, OnInit, Output} from '@angular/core';
import * as echarts from 'echarts';
import {PolicyAnalysisChartService} from '../../policy-analysis-chart/policy-analysis-chart.service';

@Component({
  selector: 'app-number-evolution',
  templateUrl: './number-evolution.component.html',
  styleUrls: ['./number-evolution.component.less']
})
export class NumberEvolutionComponent implements OnInit {
  @Input() heightCount: string;
  @Input() dataBySearch: any;

  constructor(private policyService: PolicyAnalysisChartService) {
  }

  ngOnInit(): void {
    this.policyCountWithYear();
  }

  policyCountWithYear() {
    if (this.dataBySearch) {
      // 因为echarts对数据源的格式要求，在此将数据源格式化
      const data = [];
      for (let i = 0; i < this.dataBySearch[0].chartCounts.length; i++) {
        const rowTemp = [];
        for (const year of this.dataBySearch) {
          rowTemp.push(year.chartCounts[i]);
        }
        data.push(rowTemp);
        this.dataBySearch[0].data = data;
      }
      this.setChartOption(this.dataBySearch);
    } else {
      this.policyService.policyCountWithYear().subscribe(res => {
        this.setChartOption(res.result);
      });
    }

  }

  setChartOption(option: any) {
    const temp = [];
    for (const optionElement of option[0].data) {
      const tempContent = {
        type: 'bar',
        stack: '总量',
        label: {
          show: true,
          position: 'insideRight',
          formatter: (params) => {
            if (!params.value) {
              return '';
            }
          }
        },
        data: [],
        name: null
      };
      tempContent.data = optionElement;
      tempContent.name = optionElement[0].name;
      temp.push(tempContent);
    }

    temp.push(
      {
        type: 'line',
        lineStyle: {
          color: '#034ea2'
        },
        itemStyle: {
          color: '#034ea2'
        }
      }
    );
    const yearList = [];
    const countList = [];
    for (const resultItem of option) {
      yearList.push(resultItem.name);
      countList.push(resultItem.count);
    }
    temp[temp.length - 1].data = countList;

    const el = document.getElementById('number-evolution') as HTMLDivElement;
    const myCharts = echarts.init(el);
    myCharts.resize({height: this.heightCount});
    myCharts.setOption({
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        },
        formatter: (params: Array<any> ) => {
          let tar = params[0].axisValueLabel + '<br/>';
          for (const item of params) {
            if (item.value !== 0) {
              if (item.name === item.axisValueLabel) {
                item.name += '年总计';
              }
              tar += item.marker + item.name + ': ' + item.value + '<br/>';
            }
          }
          return tar;
        }
      },
      xAxis: {
        type: 'category',
        data: yearList
      },
      yAxis: {
        type: 'value'
      },
      series: temp
    });
  }
}

